<template>
  <div class="card">
    <div class="card-header" @click="openDetails">
      <h3 class="order-info">{{ order.goodsName }}</h3>
    </div>
    <div class="card-body">
      <p><strong>用户名:</strong> {{ order.fishAccount }}</p>
      <p><strong>客户姓名:</strong> {{ order.customerName }}</p>
      <p><strong>归属:</strong> {{ order.ownerUserName }}</p>
      <p><strong>京东账号:</strong> {{ order.jdAccount}}</p>
      <el-row>
      <p><strong>订单状态:
        <dict-tag
          :options="dict.type.order_status"
          :value="order.status"
        >
        </dict-tag>
        <el-button v-show="order.status==='1'" type="success" icon="el-icon-check" circle  @click="completeOrder(order)" size="mini"></el-button>
      </strong>
      </p>
      </el-row>
    </div>
    <div class="card-footer">
      <div class="button-container">
        <button class="round-button" @click="updateOrderLoginStatus(order)">获取登录状态</button>
        <button class="round-button"  @click="openCouponView(order)">优惠券</button>
      </div>
    </div>

  </div>
</template>

<script>
import { updateOrder, updateOrderLoginStatus } from '@/api/mx/order'

export default {
  name: 'orderCard',
  dicts:['login_status','order_status','ower_user'],
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data() {
    return {

    };
  },
  filters: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'short', day: 'numeric' };
      return new Date(date).toLocaleDateString('en-US', options);
    }
  },
  methods:{
    openDetails() {
      // 触发自定义事件，传递订单信息
      this.$emit("open-details", this.order);
    },
    /**
     * 获取最新登陆状态
     * @param row
     */
    updateOrderLoginStatus(row){
      updateOrderLoginStatus(row).then(response => {
        if (response.code === 200) {
          this.$message.success("获取成功")
          this.$emit("getList")
        }
      });
    },
    /**
     * 查看免息券
     */
    openCouponView(row){
      this.$emit("openCouponView", this.order);
    },
    /**
     * 完成订单
     */
    completeOrder(data) {
      let params = {
        id: data.id,
        status: '5'
      }
      updateOrder(params).then(response => {
        this.$modal.msgSuccess('订单完成')
        this.open = false
        this.$emit("getList")
      })
    },
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: scale(1.05);
}

.card-header {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px;
}

.order-info {
  margin: 0;
}

.card-body {
  padding: 15px;
}

.card-body p {
  margin: 8px 0;
  font-size: 14px;
}

.card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.button-container {
  display: flex;
}

.round-button {
  border: none;
  border-radius: 50%;
  padding: 10px;
  background-color: #3498db;
  color: #ffffff;
  cursor: pointer;
  margin: 0 5px;
  transition: background-color 0.3s;
}

.round-button:hover {
  background-color: #297fb8;
}
</style>
